<!--
Date: 2025-08-13
Copyright (c) 2025 Industrial Software Feature Database
-->
<template>
  <div class="chart">
    <div style="margin-left: 15px; font-size: 1rem">存储空间统计</div>
    <div v-if="total" style="font-size: 0.8rem; text-align: center">数据总量达标：{{ total }}</div>
    <div id="storagePieChart" class="sub-chart">
      <div
        v-if="showNoData"
        style="
          width: 100%;
          height: 90%;
          font-size: 1rem;
          color: #999;
          text-align: center;
          display: flex;
          align-items: center;
          justify-content: center;
        "
      >
        暂无统计数据
      </div>
    </div>
  </div>
</template>

<script setup>
import * as VTable from '@visactor/vtable';
import VChart from '@visactor/vchart';
const props = defineProps(['storage']);
VTable.register.chartModule('vchart', VChart);
const showNoData = ref(true);
const CONTAINER_ID = 'storagePieChart';
const total = ref('');
let vchartInstance = null;

watch(
  () => [props.storage],
  ([newPie]) => {
    // 销毁旧实例
    if (vchartInstance) {
      vchartInstance.release();
    }
    if (newPie) {
      total.value = JSON.parse(newPie).total;
      // 重新初始化图表
      initRadar(newPie);
      showNoData.value = false;
    } else {
      showNoData.value = true;
    }
  },
  { deep: true, immediate: true }
);

onBeforeUnmount(() => {
  vchartInstance?.release();
});

const initRadar = (params) => {
  console.log('初始化图表，参数:', params);
  const dataArray = Object.entries(JSON.parse(params))
    .filter(([key]) => key !== 'total')
    .map(([key, value], index) => ({ label: key, value: value.replace(/TB$/, '') }));
  const total = JSON.parse(params).total.replace(/TB$/, '');
  console.log('转换后的数据:', dataArray);
  console.log('total:', total);
  const spec = {
    type: 'pie',
    data: [
      {
        id: 'id0',
        values: dataArray
      }
    ],
    outerRadius: 0.5,
    padAngle: 0.5,
    valueField: 'value',
    categoryField: 'label',
    legends: {
      visible: true,
      orient: 'right',
      item: {
        icon: 'circle',
        label: {
          style: {
            fontSize: 8 // 直接设置字体大小（数字类型，单位 px）
          }
        }
      }
    },
    tooltip: {
      mark: {
        title: {
          value: (datum) => datum.label
        },
        content: {
          key: (datum) => datum.label,
          value: (datum) => datum.value + 'TB'
        }
      }
    },
    label: {
      visible: true,
      formatMethod: (text, datum) => {
        const percentage = ((datum.value / total) * 100).toFixed(2);
        return `${datum.label} (${percentage}%)`;
      },
      style: {
        fontSize: 8
      },
      layout: {
        overlap: {
          hideOnOverlap: false
        }
      }
    }
  };

  const vchart = new VChart(spec, { dom: CONTAINER_ID });
  vchart.renderSync();
  vchartInstance = vchart;
};
</script>

<style lang="scss" scoped>
.chart {
  background: rgba(255, 255, 255, 1);
  box-shadow: 4px 4px 10px rgba(218, 218, 218, 0.5);
  border-radius: 5px;
  width: 100%;
  height: 100%;
  padding: 10px;
  .sub-chart {
    width: 100%;
    height: 80%;
  }
}
</style>
